<template>
  <div :class="wrapClass" style="width: 100%; height: 100%" :id="id"></div>
</template>

<script>
import { COLORS } from "@/constants";
import mixins from "./mixins";
export default {
  name: "pie",
  mixins: [mixins],
  props: {
    id: {
      type: String,
      default: "pie",
    },
    wrapClass: String,
    option: {
      // echarts 配置项
      type: Object,
      default: () => {},
    },
    title: String,
    data: {
      type: Array,
      default: () => [],
    },
    width: {
      type: Number,
      default: 200,
    },
  },
  computed: {
    getDefOptions() {
      const that = this;
      const defOption = {
        color: COLORS,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        // graphic: {
        //   show: false
        // },
        legend: {
          left: "center",
          bottom: 20,
          itemGap: 20,
          icon: "rect",
          pageButtonPosition: "start",
          formatter: function (name, index) {
            const item = that.data.find((item) => item.name === name);
            if (item) {
              return [
                `{a|${name}}`,
                `{x|${item.value} (${item.rate || 12})}`,
              ].join("\n");
            }
          },
          textStyle: {
            rich: {
              a: {
                position: "relative",
                fontSize: 12,
                color: "#767e91",
                align: "left",
                padding: [2, 0, 28, 0],
              },
              x: {
                fontSize: 12,
                // align: 'center',
                color: "#fff",
                padding: [-4, 0, 0, -30],
                lineHeight: 25,
              },
            },
          },
        },
        series: [
          {
            name: this.title,
            type: "pie",
            // width: '150px',
            width: `${this.width}px`,
            radius: ["50%", "100%"],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            top: -50,
            left: "center",
            // left: 'calc(-50% + 200px)',
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.data,
          },
        ],
      };
      return Object.assign({}, defOption, this.option);
    },
  },
  data() {
    return {
      myCharts: null,
    };
  },
  mounted() {
    const options = this.getDefOptions;
    if (options) {
      this.myCharts = this.$echarts.init(document.getElementById(this.id));
      this.myCharts.setOption(options);
      this.myCharts.on("legendselectchanged", (params) => {
        const { name } = params;
        // alert(`跳转到话题页: ${name}`);
        this.$emit("clickLegend", name);
      });
      this.handleResize(this.myCharts);
    }
  },
  watch: {
    getDefOptions: {
      handler: function (nval) {
        this.myCharts.setOption(nval);
      },
      deep: true,
    },
  },
};
</script>
